<template>
    <div class="chat-message flex">
        <!-- Avatar -->
        <el-avatar class="message-avatar" :size="40" :src="avatar"></el-avatar>

        <!-- My message -->
        <div v-if="type == 1" class="ml-[10px] w-full">
            <div class="message-contain message-contain--my">
                <el-tooltip popper-class="tooltip-chat-my-message">
                    <template #content>
                        <span @click="copyMyContent">点击复制</span>
                    </template>
                    <slot name="my"></slot>
                </el-tooltip>
            </div>
            <!--            <div-->
            <!--                class="flex items-center text-[#999999] pr-4 pt-2 cursor-pointer"-->
            <!--            >-->
            <!--                <el-icon><CopyDocument /></el-icon>-->
            <!--                <span class="text-xs ml-[4px]">复制</span>-->
            <!--            </div>-->
        </div>

        <!-- His message -->
        <div class="flex-1 min-w-0" v-if="type == 2">
            <div
                class="message-contain message-contain--his flex flex-col"
                style="padding: 0 10px"
            >
                <div>
                    <slot name="rob"></slot>
                </div>
                <div
                    class="flex items-center text-tx-secondary text-sm mt-[8px]"
                    v-if="loading && !content?.length"
                >
                    <div
                        class="flex items-center"
                        style="animation: loading-rotate 2s linear infinite"
                    >
                        <Icon name="el-icon-Loading" class="circular" />
                    </div>
                    <div class="ml-[5px]">思考中...</div>
                    <!--                    <ElButton-->
                    <!--                        type="primary"-->
                    <!--                        link-->
                    <!--                        :disabled="!stopping"-->
                    <!--                        @click="emit('close')"-->
                    <!--                    >-->
                    <!--                        <div class="text-[#FFA621]">停止回答</div>-->
                    <!--                    </ElButton>-->
                </div>
                <div v-if="!loading" class="flex justify-between items-center">
                    <div v-if="disclaimer" class="text-xs text-[#C8CDD3]">
                        以上内容为AI生成，不代表开发者立场，请勿删除或修改本标记
                    </div>
                    <div class="pr-2">
                        <ElButton v-if="showRewriteBtn" link @click="rewrite">
                            <el-tooltip
                                content="重写"
                                popper-class="tooltip-chat-my-message"
                            >
                                <i
                                    class="iconfont icon-zhongxinshangchuan"
                                    style="color: #c8cdd3"
                                />
                            </el-tooltip>
                        </ElButton>
                        <ElButton v-if="showCopyBtn" link @click="copyContent">
                            <el-tooltip
                                content="复制"
                                popper-class="tooltip-chat-my-message"
                            >
                                <i
                                    class="iconfont icon-copy"
                                    style="color: #c8cdd3"
                                />
                            </el-tooltip>
                        </ElButton>
                        <!--                        <ElButton-->
                        <!--                            v-if="showCollectBtn"-->
                        <!--                            :type="isCollet ? 'primary' : 'info'"-->
                        <!--                            link-->
                        <!--                            @click="collect"-->
                        <!--                        >-->
                        <!--                            <template #default> 收藏 </template>-->
                        <!--                        </ElButton>-->

                        <!--                        <ElButton-->
                        <!--                            v-if="showPoster"-->
                        <!--                            link-->
                        <!--                            @click="emit('poster')"-->
                        <!--                        >-->
                        <!--                            <template #icon>-->
                        <!--                                <Icon name="el-icon-Picture" />-->
                        <!--                            </template>-->
                        <!--                            <template #default> 生成海报 </template>-->
                        <!--                        </ElButton>-->
                    </div>
                </div>
            </div>
            <div class="ml-[10px]">
                <slot name="footer" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElAvatar, ElButton } from 'element-plus'
const emit = defineEmits([
    'collect',
    'close',
    'copyContent',
    'copyMyContent',
    'poster',
    'rewrite'
])
const props = defineProps({
    loading: {
        type: Boolean,
        default: false
    },
    content: {
        type: Array || String || Boolean,
        default: []
    },
    stopping: {
        type: Boolean,
        default: false
    },
    avatar: {
        type: String,
        default: ''
    },
    disclaimer: {
        // 免责文案
        type: Boolean,
        default: true
    },
    type: {
        type: Number,
        default: null
    },
    showCopyBtn: {
        type: Boolean,
        default: true
    },
    showRewriteBtn: {
        type: Boolean,
        default: false
    },
    showCollectBtn: {
        type: Boolean,
        default: true
    },
    isCollet: {
        type: Number
    },
    showPoster: {
        type: Boolean,
        default: true
    }
})
//收藏
const collect = () => {
    emit('collect')
}
//复制我的
const copyMyContent = () => {
    emit('copyMyContent')
}
const rewrite = () => {
    emit('rewrite')
}
//复制
const copyContent = () => {
    emit('copyContent')
}
</script>

<style>
.tooltip-chat-my-message {
    background: #979797 !important;
    color: white !important;
    border: 1px solid #979797 !important;
}
.tooltip-chat-my-message .el-popper__arrow::before {
    background: #979797 !important;
    border: 1px solid #979797 !important;
}
</style>
<style lang="scss" scoped>
@import 'assets/styles/fix_online_css.scss';
// todo
//:deep(.markdown-body) {
//    color: #838a95;
//}
.chat-message {
    font-size: 15px;
    // display: flex;
    color: #838a95;
    flex: 1;
    min-width: 0;
    .message-avatar {
        min-width: 40px;
    }

    .message-contain {
        padding: 10px 12px;
        border-radius: 8px;
        //max-width: 750px;
    }

    .message-contain--my {
        margin-right: 10px;
        //background-color: var(--el-color-primary);
        color: #838a95;
        margin-left: auto;
        &:hover {
            background: #ededf0;
        }
    }

    .message-contain--his {
        margin-left: 10px;
        //background-color: var(--el-bg-color-page);
        background: white;
        flex: 1;
        min-width: 0;
    }
}
</style>
